<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

	</head>

	<body>
		<h1>브라우저객체 BOM</h1>
		<p>자바스크립트를 통해 브라우저를 제어할 수 있</p>
		<p>window : 브라우저 창 window을 제어</p>
		<p>screen : 브라우저 화면을 다루는 객체</p>
		<p>Location : 브라우저 위치정보를 다루는 객체</p>
		<p>History : 브라우저 방문정보를 다루는 객체</p>
		<p>Navigator : 브라우저 자체정보를 다루는 객체</p>
		<p>Cookie : 브라우저 쿠키를 다루는 객체</p>
		<p>Timing : 타이머 이벤트를 다루는 객체</p>

		<h3>window 객체</h3>
		<p>브라우저 자체를 가리키는 객체</p>
		<p>window 객체는 모든 브라우저에 지원함</p>
		<p>일반적으로 생략가능하고, 모든 변수,함수,객체는 windows 객체의 하위요소로 취급할 수 있음.</p>
		<p>ex) encodeURI()는 window.encodeURI()로도 사용 가능</p>
		<p>window.innerWidth : 창너비 (표준)<button type="button" onclick="checkwin()">창 크기 알아보기</button></p>
		<p>window.innerHeight : 창높이(표준)</p>
		<p>document.body.clientWidth:창너비 (IE8이하)</p>
		<p>document.body.clientHeight:창높이 (IE8이하)</p>
		
		<p>window.open(주소,창이름,창속성):<button type="button" onclick="newwin1()">새창띄우기</button><button type="button" onclick="randomwin()">랜덤창띄우기</button>
			<button type="button" onclick="stoprandom()">랜덤멈추기</button>
		</p>
		<p>window.close():<button type="button" onclick="closewin1()">창닫기</button></p>
		<p>window.moveTo(x좌표,y좌표):<button type="button" onclick="movwin1()">창이동 </button></p>
		<p>window.resizeTo(가로크기,세로크기):<button type="button" onclick="resizewin1()">창 크기 변경하기</button></p>
		
		<script type="text/javascript">
		
			
		
		
			var win1=null,win2=null; // 새창을 기억하기 위해 			
			
				function checkwin(){
					var result="창가로크기:"+window.innerWidth+"\n"+"창세로크기:"+window.innerHeight;
					alert(result);
				
			}
			
			
			function newwin1(){
			 win1=	window.open("http://www.naver.com","win1","width=350;,height=250;"); // 새창을 띄울때는 반드시 창이름을 지정 할
			}
			function closewin1(){
			win1.close(); //창닫기	
			//window.close(); 현재창닫기
		// 	self.close();
			

			}
			function movwin1(){
				win2=window.open("about:blank","win","width=100,height=100");
				win2.moveTo(100,105);
				win2.focus();
				
			}
			function resizewin1 () {
				win2.resizeTo(550,450);
			  
			}
			
			function randomwin(){
				win3=window.open("about:blank","win3","width=250,height=150");
				timer = setInterval("makewin()",500);
					}
			function makewin(){
				win3.resizeTo(Math.random()*400,Math.random()*400);
				win3.movoeTo(Math.random()*900,Math.random()*900);
				win3.focus();
					}
			function stoprandom(){
				clearInterval(timer);
				win3.close();
			}
		
		</script>
	
		<hr />
		<h3>Screen</h3>
		<p>브라우저 화면정보 제어</p>
		<p>screen.availWidth:(방문객 브라우저 화면 가로크기)<button type="button" onclick="showscreen()">최대 화면 크기</button></p>
		<p>screen.availHeight :(방문객 브라우저 화면 세로크기)</p>
		<p>screen.width:(전체화면 가로크기)<button type="button" onclick="centerscreen()">정중아에 화면 띄우기(300x200)</button></p>
		<p>screen.height:(전체 화면 세로 크기)</p>
		
		<script type="text/javascript">
			var result="브라우저 가로화면 : "+screen.availWidth+"\n"+"브라우저 세로화면:"+screen.availHeight+"\n"+"가로화면크기 : "+screen.width+"\n세로화면크기"+screen.height;
			alert(result);
			
			function centerscreen(){
				var cw = screen.width/2;
				var ch = screen.height/2;
			var	win4=window.open("about:blank","win4","width=300,height=200");
		win4.moveTo(cw-150,ch-100);
			}
					
		</script>
		<hr />
		
		<h3>Location</h3>
		<p>브라우저 현제 페이지의 주소 URL을 알아내거나  <br /> 브라우저에게 새로운 페이지로 이동하라고 지시할 수 있음.</p>
		<p>location.hostname.:호스트 정보</p>
		<p>location.pathname:현재페이지 경로</p>
		<p>location.port:현재 페이지 포트번호</p>
		<p>location.protocol:현재 페이지 프로토콜 </p>
		<p>location.href:현재페이지 URL<button type="button" onclick="go2page()">새로운페이지로 이동</button></p>
		<p>location.replace: 지정한 페이지로 교체함 location.href와 유사하지만 history가 남지 않음.</p>
		<p>location.reload: 현재 페이지 새로고쵬</p>
		<script type="text/javascript">
			
			document.write(location.hostname+"<br />");
			document.write(location.pathname+"<br />");
			document.write(location.port+"<br />");
			document.write(location.protocol+"<br />");
			document.write(location.href+"<br />");
		    
		    function go2page(){
		    	location.href="http://google.co.kr";
		    }
		</script>
		
		<h3>네비게이터</h3>
		<p>방문자 브라우저의 정보로 구성된 객체</p>
		<p>navigator.appCodeName : 브라우저 코드네임</p>
		<p>navigator.appName : 브라우저 이름</p>
		<p>navigator.appVersion : 브라우저 버젼</p>
		<p>navigator.platform : 운영체제 환경</p>
		<p>navigator.userAgent : 방문자 브라우저 정보</p>
		<script type="text/javascript">
			var result=navigator.appCodeName;
			result+="<br />"+navigator.appName;
			result+="<br />"+navigator.appVersion;
			result+="<br />"+navigator.appplatform;
			result+="<br />"+navigator.appuserAgent;
			
			document.write(result+"<br/>");
			
			var ua=navigator.userAgent;
			if(ua.indexOf("Chrome")>-1)
			document.write("크롬을 사용하는 군요!");
			else if(ua.indexOf("Firefox")>-1)
			document.write("파폭을 사용하는 군요!");
			else if(ua.indexOf("MSIE")>-1)
			document.write("익스플로러를 사용하는 군요!");
			else if(ua.indexOf("rv:11.0")>-1)
			document.write("IE 11를 사용하는군요");
			else 
			document.write("기타등등");
			
		</script>
			
		</script>
		
	</body>
</html>
